<template>
	<popup-bottom ref="popup" :hideClose="true" :hideTitle="true" :isMaskClick="false" @close="onClose">
		<template #default>
			<view class="retain-cancel">
				<image src="https://image.chushouya.com/assets/images/product/icon_close@2x.png" mode="aspectFill"
					class="close" @click="onClose"></image>
				<view class="title">确认取消订单吗？</view>
				<view class="estimated">
					{{evaluateResult.productName}}明天预计掉价<text>{{(evaluateResult.evaluatePrice*0.13).toFixed(0)}}元</text>
				</view>
				<view class="sub">送您专属<text>加价券</text>，下单即可使用</view>
				<view class="coupon">
					<view class="amount"><text>¥</text>{{selectCoupon.bonusValue}}</view>
					<view class="content">
						<view>新人加价券</view>
						<view>仅限新用户首次办理使用</view>
						<view>有效期 {{countdown.hours}}:{{countdown.minutes}}:{{countdown.seconds}}</view>
					</view>
				</view>
				<view class="btn">
					<view class="cancel" @click="handleBack">仍取消订单</view>
					<view class="submit" @click="onClose">继续回收</view>
				</view>
			</view>
		</template>
	</popup-bottom>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
    		selectCoupon: { type: Object, default: { bonusValue: 0 } }
  		},
		computed: {
			...mapGetters([
				'evaluateResult', 'countdown'
			]),
		},
		methods: {
			onOpen() {
				this.$refs.popup.open()
			},
			handleBack() {
				// 关闭弹窗
				this.$refs.popup.close()
				// 延迟执行返回，确保弹窗已关闭
				setTimeout(() => {
					// 通知父组件允许返回
					this.$emit('confirmBack')
					uni.navigateBack()
				}, 300)
			},
			onClose() {
				this.$refs.popup.close()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.retain-cancel {
		padding: 32rpx 32rpx 48rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			top: 32rpx;
			right: 32rpx;
		}

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			margin-top: 16rpx;
			margin-bottom: 40rpx;
			text-align: center;
		}

		.estimated {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			margin-bottom: 4rpx;

			text {
				color: #FF4F3E;
			}
		}

		.sub {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			margin-top: 4rpx;
			margin-bottom: 40rpx;
			text-align: center;

			text {
				color: #FF4F3E;
			}
		}

		.coupon {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 40rpx;
			height: 192rpx;
			background: url('https://image.chushouya.com/assets/images/product/img_bg.png') no-repeat center;
			background-size: 100% 100%;

			.amount {
				font-family: DOUYINSANSBOLD, DOUYINSANSBOLD;
				font-weight: normal;
				font-size: 72rpx;
				color: #FF2727;
				margin-right: 126rpx;

				text {
					font-size: 36rpx;
					margin-right: 2rpx;
				}
			}

			.content {
				view {
					&:nth-child(1) {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					&:nth-child(2) {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
						margin-top: 8rpx;
						margin-bottom: 8rpx;
					}

					&:nth-child(3) {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
		}

		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 100rpx;

			view {
				width: calc(50% - 15rpx);
				height: 96rpx;
				line-height: 96rpx;
				border-radius: 50rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #333333;
				text-align: center;
			}

			.cancel {
				background: #F6F7F9;
			}

			.submit {
				background: #FFCE46;
			}
		}
	}
</style>